<template>
  <div class="theme-setting">
    <el-divider content-position="left">系统</el-divider>
    <div class="color-set">
      <color-set
          size="small"
          show-alpha
          title="模块分割线"
          v-model="theme.color.DividingLine"/>
      <color-set
          size="small"
          show-alpha
          title="工具栏拖动边框色"
          v-model="theme.color.slide"/>
    </div>
    <el-divider content-position="left">主导航</el-divider>
    <div class="color-set">
      <color-set
          size="small"
          show-alpha
          title="导航栏背景"
          v-model="theme.color.Nav"/>
      <color-set
          size="small"
          show-alpha
          title="系统设置按钮"
          v-model="theme.color.Setting"/>
      <color-set
          size="small"
          show-alpha
          title="全屏按钮"
          v-model="theme.color.Full"/>
    </div>

    <el-divider content-position="left">侧边工具栏</el-divider>
    <div class="color-set">
      <color-set
          size="small"
          show-alpha
          title="工具栏背景色"
          v-model="theme.color.Tool.backgroundColor"/>
      <color-set
          size="small"
          show-alpha
          title="工具按钮hover背景色"
          v-model="theme.color.Tool.button.hover"/>
      <color-set
          size="small"
          show-alpha
          title="工具按钮选中背景色"
          v-model="theme.color.Tool.button.check"/>
    </div>

    <el-divider content-position="left">窗口标签</el-divider>
    <div class="color-set">
      <color-set
          size="small"
          show-alpha
          title="窗口标签导航栏背景色"
          v-model="theme.color.Window.backgroundColor"/>
      <color-set
          size="small"
          show-alpha
          title="活跃标签文字&图标"
          v-model="theme.color.Window.active.color"/>
      <color-set
          size="small"
          show-alpha
          title="非活跃标签文字&图标"
          v-model="theme.color.Window.unActive.color"/>
      <color-set
          size="small"
          show-alpha
          title="窗口下划线"
          v-model="theme.color.Window.underline"/>
    </div>
    <el-divider content-position="left">菜单</el-divider>
    <div class="color-set">
      <color-set
          size="small"
          show-alpha
          title="左侧菜单栏布局背景"
          v-model="theme.color.Menu.leftMenuBackGroundColor"/>
      <color-set
          size="small"
          show-alpha
          title="活跃菜单文本颜色"
          v-model="theme.color.Menu.activeTextColor"/>
      <color-set
          size="small"
          show-alpha
          title="菜单背景色"
          v-model="theme.color.Menu.backgroundColor"/>
      <color-set
          size="small"
          show-alpha
          title="菜单选项字体颜色"
          v-model="theme.color.Menu.textColor"/>
    </div>
    <el-divider content-position="left">菜单页面</el-divider>
    <div class="color-set">
      <color-set
          size="small"
          show-alpha
          title="菜单页面主背景色"
          v-model="theme.color.MenuPage.backgroundColor"/>
    </div>

  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useThemeStore} from "../../../store/theme";
import ColorSet from "./ColorSet.vue";
const theme=useThemeStore()

</script>



<style scoped>
.theme-setting{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.color-set{
  display: flex;
  flex-wrap: wrap;
}
</style>